<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .fl {
        float: left;
      }
      .fr {
        float: right;
      }
      .clearfix {
        clear: both;
      }
      .head {
        width: 1200px;
        margin: auto;
        font-size: 18px;
        color: #3c3d46;
      }
      li {
        list-style: none;
      }
      .nav li {
        float: left;
        width: 80px;
        height: 72px;
        margin-right: 24px;
        line-height: 72px;
        text-align: center;
      }
      .nav {
        margin-left: 159px;
      }
      .logo {
        margin-top: 7px;
      }
      .logo img {
        vertical-align: middle;
      }
      .act {
        background-color: #5696ff;
        color: #ffff !important;
      }
      .login {
        /* 这里单独加行高，是因为 line-height 属性会影响 img 元素*/
        line-height: 72px;
      }
      .head .line {
        margin: 0 10px;
      }
      .banner {
        height: 45px;
        background: url(../img/lesson_12/banner.jpg) no-repeat center;
        padding-top: 555px;
      }
      .banner-item {
        width: 53px;
        margin: auto;
      }
      .circle1,
      .circle2 {
        width: 16px;
        height: 16px;
        border-radius: 50%;
      }
      .circle1 {
        background: #fcfcfd;
      }
      .circle2 {
        border: 2px solid #fcfcfd;
        box-sizing: border-box;
      }
      .title .line {
        width: 78px;
        height: 6px;
        background-color: #666666;
        margin-top: 18px;
      }
      .area {
        width: 327px;
        margin: 170px auto 0;
      }
      .title h1 {
        font-size: 36px;
        margin-left: 14px;
        color: #5696ff;
      }
      .sub-title {
        font-size: 22px;
        color: #666666;
        text-align: center;
        margin-top: 22px;
      }
    </style>
  </head>
  <body>
    <div class="warp">
      <div class="head">
        <div class="logo fl">
          <img src="../img/lesson_12/logo.png" alt="logo" />
          <img src="../img/lesson_12/brand.png" alt="brand" />
        </div>
        <ul class="nav fl">
          <li class="act">首页</li>
          <li>地区</li>
          <li>特惠</li>
          <li>资讯</li>
          <li>游记</li>
          <div class="clearfix"></div>
        </ul>
        <div class="login fr">
          <span>登录</span><span class="line">|</span><span>注册</span>
        </div>
        <div class="clearfix"></div>
      </div>
      <!-- banner 轮播图 -->
      <div class="banner">
        <div class="banner-item">
          <div class="circle1 cir fl"></div>
          <div class="circle2 cir fr"></div>
          <div class="clearfix"></div>
        </div>
      </div>
      <!-- 地区旅游 -->
      <div class="area">
        <div class="title">
          <div class="line fl"></div>
          <h1 class="fl">地区旅游</h1>
          <div class="line fr"></div>
          <div class="clearfix"></div>
        </div>
        <div class="sub-title">从这开始有意思的地区文化</div>
      </div>
    </div>
  </body>
</html>
